import * as React from "react";
import { inject, observer } from "mobx-react";
import { Table, Input, Button, Icon } from 'antd';
import { ColumnProps } from 'antd/lib/table/interface';
import { AppStore} from '../../store';

interface IProps {
  appStore?: AppStore;
  columns: ColumnProps<Users.IUser>[];
  dataSource: {
    totalCount: number,
    items: any
  };
  pageChange?(page: number, pageSize: number): any
  children?: AudioContextLatencyCategory;
  style?:any
}


interface State {
}

//初始化state并设为只读
const initialState: State = {
};

type IState = Readonly<typeof initialState>;

@inject("appStore")
@observer
class PublicTable extends React.Component<IProps, IState> {

  readonly state: IState = initialState;

  pageChange = (page: number, pageSize: number) => {
    this.props.appStore.pageChange(page)
    this.props.pageChange(page, pageSize)
  }

  onSelectChange = (selectedRowKeys: string[], selectedRows: any) => {
    this.props.appStore.onSelectChange(selectedRowKeys, selectedRows)
  }

  render() {
    const { columns, dataSource, } = this.props;
    const { currentPage, selectedRowKeys} = this.props.appStore

    const pageconf = {
      total: dataSource.totalCount,
      onChange: this.pageChange,
      current: currentPage,
    }

    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <Table
        rowKey={(record: any) => record.id}
        columns={columns}
        dataSource={dataSource.items}
        pagination={pageconf}
        rowSelection={rowSelection}
        style={this.props.style}
      />
    );
  }
}

export default PublicTable
